<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Blog</title>
    <meta name="description" content="Blog">
    <meta name="keywords" content="Blog">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/style.css">
    <!--<link rel="stylesheet" href="../css/fonts/element-icons.woff">-->
    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <style type="text/css">
        .el-icon-arrow-right{
            height: 2px;
        }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#F2F6FC" >
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-submenu v-for="menu in menuList" :index="menu.path">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            {{menu.title}}
                        </template>
                        <template v-for="child in menu.children" v-if="!child.isComplete">
                            <a :href="child.linkUrl" style="color:black;text-decoration:none" target="right" onclick=reinitIframe()>
                                <el-menu-item :index="child.path">
                                    {{child.title}}
                                </el-menu-item>
                            </a>
                        </template>
                    </el-submenu>
                    <el-menu-item index="4" disabled>消息中心</el-menu-item>
                    <el-menu-item index="5"><a href="javascript:void(0)" target="_blank">选项</a></el-menu-item>
                </el-menu>
            </el-header>
            <!--翻页时钟-->
                <div class="clockBackGround">
                    <div class="clock">
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                        <em class="divider">:</em>
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                        <em class="divider">:</em>
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                        <div class="flip">
                            <div class="digital front" data-number="0"></div>
                            <div class="digital back" data-number="1"></div>
                        </div>
                    </div>
                </div>
            <!--面包屑-->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
            <el-main align="middle">
                <iframe name="right" class="el-main" id="frame_content" src="/pages/main.html" width="1400px" height="1100px" frameborder="0" align="middle" style="border: #3a8ee6 solid 1px"></iframe>
            </el-main>
            <el-footer>
                底部
            </el-footer>
        </el-container>
    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data:{
            menuList:[
                {
                    "path": "2",
                    "title": "后端",
                    "icon":"el-icon-tickets",
                    "children": [
                        {
                            "path": "/2-1",
                            "title": "java",
                            "linkUrl":"/pages/markdown.html",
                            "children":[]
                        }
                    ]
                },
                {
                    "path": "3",
                    "title": "前端",
                    "icon":"el-icon-tickets",
                    "children": [
                        {
                            "path": "/3-1",
                            "title": "VUE",
                            "linkUrl":"javascript:void(0)",
                            "children":[]
                        },
                        {
                            "path": "/3-2",
                            "title": "JQuery",
                            "linkUrl":"javascript:void(0)",
                            "children":[]
                        },
                        {
                            "path": "/3-3",
                            "title": "Bootstrap",
                            "linkUrl":"javascript:void(0)",
                            "children":[]
                        }
                    ]
                }
            ]
        },
        method:{

        },

    });



</script>
<script src="../js/script.js"></script>
<!--<script>
    //iframe嵌套网页标签动态获取网页内容大小
    function reinitIframe(){
        var iframe = document.getElementById("frame_content");
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight,
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight,
                height = Math.max(bHeight, dHeight);
            iframe.height =  height;
            clearInterval(interval)
        }catch (ex){}

    }
    var interval = window.setInterval("reinitIframe()", 1000);
</script>-->
</html>
